import React, { useState, useEffect } from "react";
import { connect } from "dva";
import styles from "./IndexPage.less";
import { Button } from "antd";

function IndexPage(props) {
  let data = props.data;
  // let data = [
  //   "夏侯惇",
  //   "百里守约",
  //   "鲁班七号",
  //   "伽罗",
  //   "狄仁杰",
  //   "武则天",
  //   "安琪拉",
  //   "李白",
  //   "韩信",
  //   "百里玄策",
  //   "牛顿",
  //   "爱因斯坦",
  //   "伽利略",
  //   "宁泽涛",
  //   "蔡徐坤",
  //   "小鬼",
  //   "库里",
  //   "詹姆斯",
  //   "杜兰特",
  //   "王海洋",
  //   "利拉德",
  //   "嬴政",
  //   "欧文",
  //   "哈登",
  //   "温柔",
  //   "大方",
  //   "可爱",
  //   "美丽",
  //   "富强",
  //   "民主",
  //   "文明",
  //   "和谐",
  //   "诚信",
  //   "友善",
  //   "敬业",
  //   "公正",
  //   "法治",
  //   "自由",
  //   "平等",
  //   "东契奇",
  //   "乔丹",
  //   "汤普森",
  //   "green",
  //   "姚明",
  //   "刘翔",
  //   "中科院",
  //   "河师大",
  //   "河科大",
  //   "哈工大",
  //   "中科大",
  //   "莱昂纳德",
  // ];

  const [randomGift, setrandomGift] = useState([]);
  const [isStart, setisStart] = useState(false);

  // 生成随机数
  function randomNum(minNum, maxNum) {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10);
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      default:
        return 0;
    }
  }
  // 开始
  function start() {
    console.log("start");
    setisStart(() => true);
  }
  // 停止
  function end() {
    console.log("end");
    setisStart(() => false);
  }

  useEffect(() => {
    if (!isStart) return;
    let timer = setInterval(() => {
      let arr = [];
      for (let i = 0; i < 4; i++) {
        arr.push(data[randomNum(0, data.length - 1)]);
      }
      // console.log(arr);
      setrandomGift(() => arr);
    }, 200);
    return () => {
      clearInterval(timer);
      setisStart(() => false);
    };
  }, [isStart]);

  return (
    <div className={styles.container}>
      <div>
        {randomGift.map((v, index) => {
          return <h1 key={index}>{v}</h1>;
        })}
      </div>
      {!isStart ? (
        <Button type="primary" onClick={start}>
          开始抽奖
        </Button>
      ) : (
        <Button type="primary" onClick={end}>
          停止抽奖
        </Button>
      )}
    </div>
  );
}

IndexPage.propTypes = {};
const mapStateToProps = (state) => ({
  data: state.gift.data,
});

export default connect(mapStateToProps)(IndexPage);
